﻿<html thumb-width=164 thumb-height=100>
	<head>
		<style>
			@import url(menu.css);
			body
			{
				background : white;
				color      : black;
				font-size  : 26px;
				margin     : 0px;
				padding    : 0px;
				text-align : center;
			}
			#menu
			{
				background     : url(gradient-60.png) repeat-x;
				border         : 1px solid #606060;
				height         : 48px;
				margin         : -1px;
				padding        : 0px 10px;
				width          : 0px;
				vertical-align : middle;
				color          : black;
			}
			#notebook-title
			{
				border-style : none;
				display      : none;
				height       : 32px;
				overflow     : hidden;
				width        : 100%;
			}
			#note-list-panel
			{
				flow   : horizontal;
				height : 100%%;
				width  : 100%;
			}
			#note-list
			{
				background-color : #f0ec40;
				behavior         : clickable;
				height           : 100%%;
				overflow         : hidden;
				text-align       : left;
				width            : 100%%;
			}
			#note-list .note
			{
				background-image    : url(corner.png);
				background-position : right top;
				background-repeat   : no-repeat;
				border-top          : 1px solid #606060;
				overflow            : hidden;
			}
			#note-list[view-style=combined] .note
			{
				height : 100px;
			}
			#note-list[view-style=titles] .note
			{
				height : 76px;
			}
			#note-list[view-style=combined] .note #thumb
			{
				border-style : none;
				border-right : 4px solid #f0ec40;
				display      : block;
				float        : left;
			}
			#note-list[view-style=titles] .note #thumb
			{
				display : none;
			}
			#note-list .note #time
			{
				font-size : 20px;
				height    : 28px;
			}
			#note-list .note #title
			{
				font-size   : 20px;
				font-weight : bold;
				line-height : 23px;
				white-space : normal;
			}
			#note-list .note[dirty]
			{
				background-image : url(corner-light.png);
				background-color : #f0ecb0;
			}
			#note-list .note[dirty] #thumb
			{
				border-right : 4px solid #f0ecb0;
			}
			#new-note-note
			{
				flow : horizontal;
			}
			#new-note-note #label
			{
				padding-left   : 10px;
				vertical-align : middle;
				width          : 100%%;
			}
			#new-note-note widget
			{
				background-repeat : no-repeat;
				border-style      : none;
				height            : 78px;
				margin            : 0px;
				padding           : 0px;
				width             : 78px;
			}
			#new-text
			{
				background : url(text-note.png);
			}
			#new-text:active
			{
				background : url(text-note-pressed.png);
			}
			#new-voice
			{
				background : url(voice-note.png);
			}
			#new-voice:active
			{
				background : url(voice-note-pressed.png);
			}
			#new-photo
			{
				background : url(photo-note.png);
			}
			#new-photo:active
			{
				background : url(photo-note-pressed.png);
			}
			#new-ink
			{
				background : url(ink-note.png);
			}
			#new-ink:active
			{
				background : url(ink-note-pressed.png);
			}
			#page-down, #page-up
			{
				behavior   : clickable;
				display    : none;
				text-align : center;
				padding    : 20px 0px;
			}
			#scroll
			{
				background : white;
				height     : 100%%;
				overflow   : hidden;
				width      : 5px;
			}
			#scroll > .slider
			{
				background-color : #606060;
				border-radius    : 2px;
				display          : none;
				height           : 128px;
				width            : 100%%;
			}
			#search-frame
			{
				border-style  : none;
				border-bottom : 1px solid #000000;
				flow          : horizontal;
				width         : 100%;
			}
			#search-box
			{
				margin : 8px 0px 8px 8px;
				width  : 100%%;
			}
			#search-button
			{
				background   : url(search.png) no-repeat;
				border-style : none;
				height       : 40px;
				margin       : 8px 8px 8px 0px;
				padding      : 0px;
				width        : 40px;
			}
			#status
			{
				font-size      : 20px;
				line-height    : 24px;
				max-height     : 48px;
				overflow       : hidden;
				vertical-align : middle;
				width          : 100%%;
			}
			#status-bar
			{
				background : url(status-gray.png) repeat-x;
				border-top : 1px solid #606060;
				display    : table-cell;
				flow       : horizontal;
				height     : 48px;
				overflow   : hidden;
				width      : 100%;
			}
			#status-button
			{
				behavior : clickable;
				padding  : 0px 6px;
			}
			#status-progress
			{
				background-offset-right : 100%;
				background              : url(status-green.png) repeat-x;
				height                  : 100%%;
				text-align              : left;
				vertical-align          : middle;
				width                   : 100%%;
			}
			#sync-icon
			{
				background:   url(sync.png);
				border-style: none;
				height:       48px;
				margin:       0px;
				padding:      0px;
				width:        52px;
			}
			#sync-panel
			{
				background: url(gradient-60.png) repeat-x;
				behavior:   clickable;
				display:    none;
				flow:       horizontal;
				width:      0px;
			}
			#sync-panel[disabled="true"] *
			{
				background-color: #e0e0c0;
				border-color:     #404020;
				color:            #404020;
				background-image-transformation: contrast-brightness-gamma(0.5,0.8, 1.0);
			}
			#sync-panel[disabled="true"]
			{
				background-image: none;
				background-color: red;
			}
			#sync-panel > *
			{
				border-style:   none;
				border-right:   1px solid black;
				height:         48px;
				vertical-align: middle;
			}
			#sync-text
			{
				padding:     0px 4px;
				white-space: nowrap;
			}
		</style>
	</head>
	<body>
		<div #notebook-title />
		<div #search-frame>
			<widget #search-box    type="text"   tabindex="2" />
			<widget #search-button type="button" tabindex="3" />
		</div>
		<div #note-list-panel>
			<div #note-list view-style="combined" tabindex="0">
				<div #new-note-note>
					<div #label>Create note:</div>
					<widget type="button" #new-text  />
					<widget type="button" #new-ink   />
					<widget type="button" #new-voice />
					<widget type="button" #new-photo />
				</div>
				<div #page-up>Later notes</div>
				<div #page-down>Eariler notes</div>
			</div>
			<div #scroll><div .slider /></div>
		</div>
		<div #status-bar>
			<div #sync-panel>
				<div #sync-icon />
				<div #sync-text />
			</div>
			<div #status-progress><div #status-button><span #status /></div></div>
			<widget type="button" #menu>Menu</widget>
		</div>
	</body>
</html>
